<!--
  标准弹窗组件
  @author YangMiao 1939724848@qq.com
  @date   2021/12/14 10:12
-->
<template>
  <el-dialog
    :title="layerTitle"
    :visible="showLayer"
    :width="layerWidth"
    :fullscreen="fullscreen"
    :before-close="rightTopBtnClose"
    @closed="closed"
  >
    <slot />
    <div slot="footer" class="dialog-footer">
      <el-button v-if="isShowCancelBtn" @click="clickLayerOperateCloseBtn">{{ formCancelFont }}</el-button>
      <el-button v-if="isShowSubmitBtn" type="primary" @click="clickLayerOperateSubmit">{{ formDetermineFont }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MIEELLayer',
  props: {
    /**
     * 弹窗标题
     * @author YangMiao
     * @date   2021/5/15 17:47
     */
    layerTitle: {
      type: String,
      default: () => '数据弹窗'
    },
    /**
     * 弹窗是否显示
     * @author YangMiao
     * @date   2021/5/15 17:47
     */
    showLayer: {
      type: Boolean,
      default: () => false
    },
    /**
     * 弹窗宽度
     * @author YangMiao
     * @date   2021/5/15 17:47
     */
    layerWidth: {
      type: String,
      default: '40%'
    },
    /**
     * 弹窗取消按钮文字
     * @author YangMiao
     * @date   2021/5/15 17:47
     */
    formCancelFont: {
      type: String,
      default: '取 消'
    },
    /**
     * 弹窗确定按钮文字
     * @author YangMiao
     * @date   2021/5/15 17:47
     */
    formDetermineFont: {
      type: String,
      default: '确 定'
    },
    /**
     * 是否为全屏dialog
     * @author YangMiao
     * @date   2021/5/16 13:50
     */
    fullscreen: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示取消按钮
     * @author YangMiao 1939724848@qq.com
     * @date   2021/9/16 12:21
     */
    isShowCancelBtn: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示提交按钮
     * @author YangMiao 1939724848@qq.com
     * @date   2021/9/16 12:21
     */
    isShowSubmitBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    /**
     * 弹窗关闭按钮
     */
    rightTopBtnClose(done) {
      // 直接调用外部的逻辑关闭方法 这里只是触发
      this.$emit('rightTopBtnClose', done)
    },
    /**
     * 点击了弹窗取消按钮
     */
    clickLayerOperateCloseBtn() {
      this.$emit('clickLayerOperateCloseBtn')
    },
    /**
     * 点击了弹窗确认按钮
     */
    clickLayerOperateSubmit() {
      this.$emit('clickLayerOperateSubmit')
    },
    /**
     * 弹窗关闭后的回调
     * @author YangMiao 1939724848@qq.com
     * @date   2021/11/12 16:14
     */
    closed() {
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
